import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'

import { exportConfig, sendToTest } from '../../actions/banneraction';

class Menu extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        const {parent, active} = this.props
        return (
            <aside className="main-sidebar">
                <section className="sidebar">
                    <div className="title">迅雷下载宝官网运营</div>
                    <ul className="sidebar-menu">
                        <li className="header">
                            导航栏
                        </li>
                        <li className={active=='/'?'active':''}>
                            <Link to="/dashboard">
                                <i className="fa fa-dashboard">
                                </i>
                                <span>控制面板</span>
                            </Link>
                        </li>
                        <li className={parent=='gw'? 'treeview active':'treeview'}>
                            <a>
                                <i className="fa fa-th">
                                </i>
                                <span>官网运营</span>
                                <i className="fa fa-angle-left pull-right">
                                </i>
                            </a>
                            <ul className="treeview-menu">
                                <li className={active=='/banner'?'active':''}>
                                    <Link to="/banner"><i className="fa fa-circle-o">
                                    </i>更换Banner</Link>
                                </li>
                                <li className={active=='/price'?'active':''}>
                                    <Link to="/price"><i className="fa fa-circle-o">
                                    </i>更改价格</Link>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div style={{marginTop: '50px'}}>
                        <button style={{marginLeft: '20px'}} onClick={this.exportData.bind(this)}>同步到开发环境</button><br /><br />
                        <button style={{marginLeft: '20px'}} onClick={this.sendData.bind(this)}>同步到测试环境</button><br /><br />
                    </div>

                </section>
            </aside>
        )
    }

    exportData () {
        const { addStatus, exportStatus, history, currentIndex, originalPrice, discountPrice, exportData } = this.props

        if(addStatus){
            alert('请先保存新增数据，或取消新增数据');
        }else if(!exportStatus){
            alert('数据未变更或未保存，请先保存您所有的修改，然后再操作');
        }else{
            if(!/^[1-9][0-9]*$/.test(originalPrice)){
                alert('请输入正确的原价');
                return;
            }
            if(!/^[1-9][0-9]*$/.test(discountPrice)){
                alert('请输入正确的优惠价');
                return;
            }
            if(parseInt(originalPrice) < parseInt(discountPrice)){
                alert('原价不能低于优惠价');
                return;
            }

            var saveObj = {
                desc : history[currentIndex].desc,
                pcUrl : history[currentIndex].pcUrl,
                mobileUrl : history[currentIndex].mobileUrl,
                pcImg : history[currentIndex].pcImg,
                mobileImg : history[currentIndex].mobileImg,
                originalPrice : originalPrice,
                discountPrice : discountPrice
            }

            exportData(saveObj, function(){
                alert('同步到开发环境成功');
            });
        }
    }

    sendData () {
        const { sendData, testStatus } = this.props

        if(!testStatus){
            alert('数据未修改或未同步开发环境，请先同步到开发环境，然后再进行此操作');
        }else{
            sendData(function(){
                alert('同步到测试环境成功');
            });
        }
    }
}

//使用connect创建component，把dispatch和state传进ui component
export default connect(
    (state)=>({
        history : state.bannerReducer.history,
        currentIndex : state.bannerReducer.currentIndex,
        addStatus : state.bannerReducer.addStatus,
        exportStatus : state.bannerReducer.exportStatus,
        testStatus : state.bannerReducer.testStatus,
        originalPrice : state.priceReducer.originalPrice,
        discountPrice : state.priceReducer.discountPrice
    }),
    (dispatch)=>({

        exportData : (data, cb) => {
            dispatch(exportConfig(data, cb));
        },

        sendData : (cb) => {
            dispatch(sendToTest(cb));
        }

    })
)(Menu)
